<template>
  <div>
    <div class="searchCon">
      <el-date-picker
        v-model="value"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>
      <div class="buttonCon">
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button plain type="primary" icon="el-icon-refresh-left">重置</el-button>
      </div>
    </div>
    <!-- 进度展示 -->
      <el-table :data="tableData" class="elTable" v-show="value">
        <el-table-column prop="name" label="项目名称" min-width="30%">
          <template slot-scope="scope">
            <div class="proName" @click="showPop">{{scope.row.name}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="yjtime" label="预计时间" min-width="15%"></el-table-column>
        <el-table-column prop="sjtime" label="实际时间" min-width="15%"></el-table-column>
        <el-table-column label="项目进度" min-width="40%">
          <template slot-scope="scope">
            <div>
              <time-progress
                :allstart="value[0]"
                :allend="value[1]"
                :starttime="scope.row.yjstart"
                :endtime="scope.row.yjend"
              ></time-progress>

              <time-progress
                :allstart="value[0]"
                :allend="value[1]"
                :starttime="scope.row.sjstart"
                :endtime="scope.row.sjend"
                color="linear_pink"
              ></time-progress>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <customPop v-show="show"></customPop>
  </div>
</template>

<script>
import timeProgress from "components/timeProgress";
import customPop from "components/customPop";
export default {
  data() {
    return {
      show:false,
      value: ["2020-09-20", "2020-10-20"],
      pickerOptions: {
        shortcuts: [
          {
            text: "前一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "前半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "前一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "后一周",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "后半个月",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "后一个月",
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      tableData: [
        {
          name: "流动人事档案需求变更_01流动人事档案需求变更_01流动人事档案需求变更_01流动人事档案需求变更_01流动人事档案需求变更_01流动人事档案需求变更_01",
          yjtime: "2020-10-01至2020-10-15",
          yjstart: "2020-10-01",
          yjend: "2020-10-15",
          sjtime: "2020-10-01至2020-10-20",
          sjstart: "2020-10-01",
          sjend: "2020-10-20"
        },
        {
          name: "流动人事档案需求变更_02",
          yjtime: "2020-09-20至2020-10-01",
          yjstart: "2020-09-20",
          yjend: "2020-10-01",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-20",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_03",
          yjtime: "2020-09-25至2020-10-30",
          yjstart: "2020-09-25",
          yjend: "2020-10-30",
          sjtime: "2020-09-25至2020-10-18",
          sjstart: "2020-09-25",
          sjend: "2020-10-18"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        },
        {
          name: "流动人事档案需求变更_04",
          yjtime: "2020-09-11至2020-10-30",
          yjstart: "2020-09-11",
          yjend: "2020-10-30",
          sjtime: "2020-09-20至2020-10-10",
          sjstart: "2020-09-18",
          sjend: "2020-10-10"
        }
      ]
    };
  },
  components: {
    timeProgress,
    customPop
  },
  methods:{
    showPop(){
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/scss/var.scss';
.searchCon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.buttonCon {
  margin-left: 20px;
}
.proName{
  color:#409EFF;
  cursor: pointer;
  &:hover{
    text-decoration: underline;
  }
}

</style>
